﻿<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#" class="lang-en">
  <head>
    <meta charset="UTF-8">
    <title>Custom Vocabulary Practice - Study Tools | Genki Study Resources</title>
    <meta name="title" content="Custom Vocabulary Practice - Study Tools | Genki Study Resources">
    <meta name="twitter:title" content="Custom Vocabulary Practice - Study Tools | Genki Study Resources">
    <meta property="og:title" content="Custom Vocabulary Practice - Study Tools | Genki Study Resources">
    <meta name="description" content="Setup your own custom vocabulary to practice.">
    <meta property="og:description" content="Setup your own custom vocabulary to practice.">
    <link rel="shortcut icon" type="image/x-icon" href="../../../resources/images/genkico.ico">

    <meta name="keywords" content="Genki, japanese, quizzes, exercises, 3rd Edition" lang="en">
    <meta name="language" content="en">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta property="og:site_name" content="sethclydesdale.github.io">
    <meta property="og:url" content="https://sethclydesdale.github.io/genki-study-resources/lessons/study-tools/custom-vocab/">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://sethclydesdale.github.io/genki-study-resources/resources/images/genki-thumb.png">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:creator" content="@SethC1995">

    <link rel="stylesheet" href="../../../resources/css/stylesheet.min.css">
    <script src="../../../resources/javascript/head.min.js"></script>
    <script src="../../../resources/javascript/ga.js" async></script>
  </head>

  <body ondrop="Genki.tools.dropFile(event);">
    
    <header>
      <h1><a href="../../../" id="home-link" class="edition-icon">Genki Study Resources</a></h1>
      <a id="fork-me" href="https://github.com/SethClydesdale/genki-study-resources">Fork Me</a>
    </header>
    
    <div id="announcement">
      <div id="announce-inner">
        <h3><i class="fa">&#xf0a1;</i> News and Info</h3>
        <div id="announce-list">
          <div id="announcement-controls" style="display:none;">
            <button class="button announce-controls button-left" onclick="GenkiAnn.next(-1, true);"><i class="fa">&#xf060;</i></button>
            <button class="button announce-controls button-right" onclick="GenkiAnn.next(+1, true);"><i class="fa">&#xf061;</i></button>
          </div>
          <noscript><div class="announcement">Please enable JavaScript to get the latest news and info.</div></noscript>
        </div>
      </div>
    </div>
    
    <div id="content">
      <div id="study-tool-editor" class="content-block loading">
        <h2 id="custom-vocab-practice" class="title center">ツール - Custom Vocabulary Practice</h2>
        <p>Welcome to the custom vocabulary practice tool! Here you will be able to setup your own set of words to practice. First insert a couple of words you want to practice. Once you've got your word list setup, click the "Study" button to begin practicing your custom vocabulary.</p>
        
        <h2 id="vocab-list" class="section-title"><span class="en">Vocabulary list</span><span class="ja">単語の一覧</span></h2>
        <br>
        <ol id="study-tool-ui">
          <li class="item-row">
            <input type="text" placeholder="word/kanji" oninput="Genki.tools.updateJSON();">
            <input type="text" placeholder="furigana (optional)" oninput="Genki.tools.updateJSON();">
            <input type="text" placeholder="definition/kana" oninput="Genki.tools.updateJSON();">
            <button class="button row-add" title="add" onclick="Genki.tools.addRow(this);"><i class="fa">&#xf067;</i></button>
            <button class="button row-remove" title="remove" onclick="Genki.tools.removeRow(this);"><i class="fa">&#xf068;</i></button>
            <input type="text" placeholder="sentence (optional)" oninput="Genki.tools.updateJSON();" class="sentence-field">
          </li>
        </ol>
        
        <h3 id="vocab-code" class="sub-title"><span class="en">Custom Vocabulary Code</span><span class="ja">カスタム練習コード</span> (JSON)</h3>
        <p>The custom vocabulary code is used to save your created vocabulary list. You can save this code to a text file for later, so you don't have to recreate your custom vocab. When you're ready to study your vocab again, just load the file or drag and drop it into this textarea and click "study" to continue where you left off.</p>
        
        <div id="study-tool-code">
          <textarea id="study-tool-json" oninput="Genki.tools.updateUI();Genki.tools.updateJSON();"></textarea>
        </div>
        
        <ul id="study-tool-settings" class="clear">
          <li><a id="downloadCode" class="button" title="Save custom exercise" download="Custom Vocabulary Exercise"><span class="en">Save</span><span class="ja">セーブする</span></a></li>
          <li><button id="loadCode" class="button" title="Load custom exercise" onclick="this.nextSibling.click();"><span class="en">Load</span><span class="ja">ロードする</span></button><input id="study-tool-file" type="file" accept=".txt,.json,.js" onchange="Genki.tools.loadCode(this);"></li>
          <li><input id="prettyCode" type="checkbox" onchange="Genki.tools.settings.prettify(this);"><label for="prettyCode"><span class="en">Prettify</span><span class="ja">プリティファイ</span></label></li>
          <li><input id="noStudyWarning" type="checkbox" onchange="Genki.tools.settings.handleCheckbox(this);"><label for="noStudyWarning"><span class="en">Do not warn me</span><span class="ja">注意しないで</span></label></li>
          <li><input id="showSentenceField" type="checkbox" onchange="Genki.tools.settings.toggleSentences(this);"><label for="showSentenceField"><span class="en">Show sentence fields</span><span class="ja">文の入力欄を見せる</span></label></li>
        </ul>
        
        <div class="center">
          <button class="button" onclick="Genki.tools.study();"><i class="fa">&#xf040;</i><span class="en">Study</span><span class="ja">勉強する</span></button>
        </div><br>
        
        <h3 id="help-notes-and-tricks" class="section-title"><span class="en">Help, Notes, and Tips</span><span class="ja">ヒント</span></h3>
        <p>
          <strong>word/kanji</strong>: a Japanese word or kanji; the word to be matched to.<br>
          <strong>furigana</strong>: a textual aid for kanji; write the kana for a kanji or romaji for kana here, if necessary.<br>
          <strong>definition/kana</strong>: an equivalent definition in another language (i.e. English) or the kana reading for a kanji; the draggable word to be matched to the word/kanji.<br>
          <strong>sentence</strong>: an example sentence to help you further memorize the word in multiple choice exercises. You can show the sentence fields by ticking the "Show sentence fields" option.<br>
          <strong>+</strong>: add a word<br>
          <strong>-</strong>: remove a word<br><br>
          
          <strong>Custom Vocabulary Code</strong>: If you're familiar with <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON" target="_blank">JSON</a>, you can edit the vocabulary code, too. Here's a few tips:<br>
          1. The syntax for a vocabulary item is "{WORD/KANJI}|{FURIGANA}":"{DEFINITION/KANA}|{SENTENCE}", with furigana and sentence being optional.<br>
          2. If using no furigana or sentences, simply remove the horizontal bars. It should be removed automatically if using the textarea above.<br>
          3. Please note that trailing commas will throw a syntax error, so simply delete the trailing comma and the vocabulary list will be updated.
        </p>
      </div>
      
      <div id="exercise" class="content-block" style="display:none;">
        <div id="quiz-result"></div>
        <div id="quiz-zone" class="clear"></div>
        <div id="quiz-timer" class="center"></div>
      </div>
    </div>
    
    <footer class="clear">
      <ul class="footer-left">
        <li><a href="../../../" id="footer-home">Home</a></li>
        <li><a href="../../../privacy/">Privacy</a></li>
        <li><a href="../../../report/">Report a Bug</a></li>
        <li><a href="../../../help/">Help</a></li>
        <li><a href="../../../donate/">Donate</a></li>
      </ul>
      
      <ul class="footer-right">
        <li>Created by <a href="https://github.com/SethClydesdale">Seth Clydesdale</a> and the <a href="https://github.com/SethClydesdale/genki-study-resources/graphs/contributors">GitHub Community</a></li>
      </ul>
    </footer>
    
    <script src="../../../resources/javascript/dragula.min.js"></script>
    <script src="../../../resources/javascript/easytimer.min.js"></script>
    <script src="../../../resources/javascript/exercises/3rd-ed.min.js"></script>
    <script src="../../../resources/javascript/genki.min.js"></script>
    <script src="../../../resources/javascript/study-tools.min.js"></script>
    <script src="../../../resources/javascript/all.min.js"></script>
    <script>
      Genki.tools.type = 'vocab';
      Genki.tools.settings.restore();
      Genki.tools.restore();
      Genki.tools.finishedLoading();
    </script>
  </body>
</html>